const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    mode:'development',
    // entry: ["@babel/polyfill",path.resolve(__dirname,'./src/index.js')],
    entry:'./src/index.js',
    output:{
        filename: '[name].[chunkhash].js',
        path:path.resolve(__dirname,'./dist'),
    },
    resolve:{
        alias:{
            '@component': path.resolve(__dirname, 'src/component'),
            '@assets': path.resolve(__dirname, 'src/assets'),
        },
        extensions:['.jsx','.js'],
    },
    
    plugins:[ // 配置插件
        new CleanWebpackPlugin() ,
        new MiniCssExtractPlugin({ // 添加插件
            filename: '[name].[chunkhash].css'
        }),
        new HtmlWebpackPlugin({
            template: './index.html',
            scriptLoading: 'blocking',
        }),
    ],
    module: {
        rules: [
            {
                test: /\.(jsx|js)$/,
                use:
                 ['cache-loader',
                  'babel-loader',
                  {
                    loader: 'thread-loader', // 开启多进程打包
                    options: {
                      worker: 3,
                    }
                  }],
                include:[path.resolve(__dirname, 'src')]
            },
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,//将处理好的 css 通过 style 标签的形式添加到页面上
                    {
                        loader:'css-loader',
                        options: {
                             modules: true
                        }
                    },//将 CSS 转化成 webpack 能够识别的数据
                    'postcss-loader',//自动添加 CSS3 部分属性的浏览器前缀
                    'less-loader',// 将 less 文件转化为 css
                    {
                        loader: 'thread-loader', // 开启多进程打包
                        options: {
                          worker: 3,
                        }
                      }
                ],
                include:[path.resolve(__dirname, 'src')]
            },
            {
                test: /\.(jpe?g|png|gif)$/i, // 匹配图片文件
                use:[
                    {
                        loader:'file-loader',
                        options: {
                            limit: 10240,
                        }// 使用 file-loader
                    },
                    {
                        loader: 'thread-loader', // 开启多进程打包
                        options: {
                            worker: 3,
                        }
                    }
                ],
                include:[path.resolve(__dirname, 'src/assets')]
            }
        ]
      },
}